<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script src="js/vue.js"></script>
</head>
<body>
	
	<div id="app">
		<label for="filterSpace">去除空格：</label><input type="text" id="filterSpace" v-model="content" /><br />
		<h2>{{content | filterSpace}}</h2>
		<br /><br />		
		<label for="numRound">四色五入：</label><input type="text" id="numRound" v-model.number="num" /><br />
		<h2>{{num | numRound}}</h2>
	</div>
	
	<script type="text/javascript">
		const app = new Vue({
			el: "#app",
			data: {
				content: "",
				num : 0
			},
			filters: {
				filterSpace: function(content) {
					return content.split(' ').join('');
				},
				numRound: function(num) {
					if (!isNaN(num)) {
						return parseFloat(num).toFixed(2) + "元";
					}
				}
			}
		})
	</script>
	
</body>
</html>